<template>
	<view class="container">
		<template v-if="userInfo.login_identity == 20">
			<u-navbar :is-back="false" title="单身团"  :background="{ backgroundImage: 'linear-gradient(180deg,rgba(237,79,93,1) 0%,rgba(251,122,142,1) 100%)' }" title-color="#fff">
				<!-- #ifdef MP -->
				<view class="suifont sui-yujianjiayuan reload-data" @tap.stop="toPage" data-url="/pageChat/pair/index"></view>
				<!-- #endif -->
				<!-- #ifndef MP -->
				<view class="suifont sui-yujianjiayuan reload-data" @tap.stop="toPage" data-url="/pageChat/pair/index" slot="right"></view>
				<!-- #endif -->
			</u-navbar>
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :height="scrollHeight + 'px'">
				<view style="background-color: #fff;">
					<view class="single-member-item" v-for="(item, index) in list" :key="index" @tap.stop="toPage" :data-url="`/pageUser/zone/member?user_id=${item.user.user_id}`">
						<image class="single-member-face" :src="item.user.avatar"></image>
						<view class="single-member-info">
							<view class="single-member-name">{{ item.user.nickName }}</view>
							<view class="single-member-real">{{ item.user.real_name }}</view>
							<view class="single-member-text">{{ item.user.province }} {{ item.user.city }}</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</template>
		<template v-else>
			<u-navbar  :immersive="true" :is-back="false" :is-fixed="true" title="穗穗" :background="{ backgroundImage: 'linear-gradient(180deg,rgba(237,79,93,1) 0%,rgba(251,122,142,1) 100%)' }" title-color="#fff">
				<!--  -->

				<view v-if="userToken" class="suifont sui-shuaxin-crude reload-data" @tap.stop="refreshCardData"></view>
			</u-navbar>
			<card-manager ref="cardManager" @slideToRight="onLike" @slideToLeft="onDislike"></card-manager>
		</template>
		<!-- #ifdef H5 || MP -->
		<face-popup v-model="facePopupShow"></face-popup>
		<!-- #endif -->
	</view>
</template>

<script>
import cardManager from '@/components/photo-card/card-manager.vue';
import ShareMixin from '@/mixins/share-mixins.js';
import ShareTypeEnum from '@/utils/enum/ShareType.js';

import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import { mapState } from 'vuex';
// #ifdef H5 || MP
import facePopup from '@/components/custom/face-popup.vue';
// #endif
export default {
	mixins: [ShareMixin, MescrollMixin],
	// #ifdef APP-PLUS
	components: { cardManager },
	// #endif
	// #ifdef H5 || MP
	components: { cardManager, facePopup },
	// #endif
	data() {
		return {
			loatheIds: [],
			loveIds: [],
			list: [],
			scrollHeight: null,
			// #ifdef APP-PLUS
			subNvueShow: false,
			// #endif
			// #ifndef APP-PLUS
			facePopupShow: false,
			// #endif
			popopDisableShow: false,
			shareParam: {
				object_type: ShareTypeEnum.PLATFORM.value,
				object_id: 0,
				object_path: 'pages/index/index',
				object_query: ''
			},
		};
	},
	computed: {
		...mapState({
			newVersion: state => state.device.newVersion || {}
		})
	},
	onLoad() {
		uni.$on('subFaceClose', this.setSubnvueClose);
	},
	onUnload() {
		uni.$off('subFaceClose', this.setSubnvueClose);
	},
	onShow() {
		const systemInfo = uni.getSystemInfoSync();
		this.scrollHeight = systemInfo.windowHeight - systemInfo.statusBarHeight - 44;
		if (this.isLogin()) {
			this.initShareMessage();
			this.refreshUserInfo();
			if (!this.popopDisableShow) {
				this.popopDisableShow = true;
				setTimeout(() => {
					// #ifdef APP-PLUS
					if (!this.subNvueShow && this.userInfo.login_identity == 10) {
						if (!this.userInfo.avatar_id) {
							const subNVue = uni.getSubNVueById('faceInIndex');
							this.subNvueShow = true;
							subNVue.show('fade-in', 300, () => {
								// 打开后进行一些操作...
								//
							});
						} else if (!this.userInfo.check_finish.coup_finish || !this.userInfo.check_finish.basic_finish) {
							uni.showModal({
								title: '您还有资料尚未完善',
								content: '完善资料系统将进行精准匹配',
								confirmText: '立即完善',
								cancelText: '稍后',
								success: e => {
									if (e.confirm) {
										this.navigateTo({
											url: '/pageUser/data/index'
										});
									}
								}
							});
						}
					}
					// #endif
					// #ifdef H5 || MP
					if (this.userInfo.login_identity == 10) {
						if (!this.userInfo.avatar_id) {
							this.facePopupShow = true;
							console.log(111);
						} else if (!this.userInfo.check_finish.coup_finish || !this.userInfo.check_finish.basic_finish) {
							uni.showModal({
								title: '您还有资料尚未完善',
								content: '完善资料系统将进行精准匹配',
								confirmText: '立即完善',
								cancelText: '稍后',
								success: e => {
									if (e.confirm) {
										this.toUserDataPage();
									}
								}
							});
						}
					}
					// #endif
				}, 100);
			}
		}
	},
	methods: {
		setSubnvueClose() {
			this.subNvueShow = false;
		},
		onLike(data) {
			const user_Id = data.userId;
			this.delDuplication(user_Id);
			this.loveIds.push(user_Id);
			this.handleAllHehavior();
		},
		onDislike(data) {
			const user_Id = data.userId;
			this.delDuplication(user_Id);
			this.loatheIds.push(user_Id);
			this.handleAllHehavior();
		},
		delDuplication(user_Id) {
			const loathePos = this.loatheIds.indexOf(user_Id);
			const lovePos = this.loveIds.indexOf(user_Id);
			if (loathePos >= 0) {
				this.loatheIds.splice(loathePos, 1);
			}
			if (lovePos >= 0) {
				this.lovePos.splice(lovePos, 1);
			}
		},

		refreshCardData() {
			this.$refs.cardManager.refreshData();
		},
		/* 记录自己对所有异性作出的特殊行为
		 *
		 *
		 * @return 无感操作，不让用户知道是否成功
		 */
		handleAllHehavior() {
			this.$u.throttle(this.saveAllHehavior, 5000, false);
		},
		saveAllHehavior() {
			const loatheIds = this.loatheIds;
			const loveIds = this.loveIds;
			this.loatheIds = [];
			this.loveIds = [];
			if (loatheIds.length > 0) {
				this.$u.api.doHehaviorToSex(loatheIds.join(','), 40);
			}
			if (loveIds.length > 0) {
				this.$u.api.doHehaviorToSex(loveIds.join(','), 30);
			}
		},
		upCallback(mescroll) {
			this.$u.api.getSingleList(mescroll.num).then(res => {
				if (mescroll.num == 1) {
					this.list = res.data.list.data;
				} else {
					this.list.push(res.data.list.data);
				}
				this.mescroll.endBySize(res.data.list.data.length, res.data.list.total);
			});
		}
	}
};
</script>

<style lang="scss">
.reload-data {
	margin-left: 15px;
	font-size: 20px;
	color: #fff;
}
/* #ifndef MP */
.reload-data {
	margin-right: 15px;
}
/* #endif */
.single-member-item {
	height: 140rpx;
	padding: 20rpx 0;
	position: relative;
	display: flex;
	padding: 0 40rpx;
	align-items: center;
	width: 750rpx;
	.single-member-face {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		flex-shrink: 0;
	}
	.single-member-info {
		height: 100rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 33rpx;
		.single-member-name {
			height: 40rpx;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
		}
		.single-member-real {
			height: 30rpx;
			line-height: 30rpx;
			color: #666666;
			font-size: 22rpx;
		}
		.single-member-text {
			height: 30rpx;
			line-height: 30rpx;
			color: #999;
			font-size: 20rpx;
		}
	}
	&::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 40rpx;
		right: 40rpx;
		background-color: #e4e4e4;
		height: 1rpx;
	}
}
</style>
